<template>
  <div class="home-view">
    <!-- Hero Section -->
    <div class="hero-section">
      <h1 class="hero-title">遗传性耳聋数据库</h1>
      <p class="hero-subtitle">专业、全面、可靠的遗传性耳聋研究数据平台</p>
      <div class="stats-container">
        <div class="stat-item">
          <span class="stat-number">10,000+</span>
          <span class="stat-label">基因数据</span>
        </div>
        <div class="stat-item">
          <span class="stat-number">5,000+</span>
          <span class="stat-label">临床病例</span>
        </div>
        <div class="stat-item">
          <span class="stat-number">100+</span>
          <span class="stat-label">研究机构</span>
        </div>
        <div class="stat-item">
          <span class="stat-number">50+</span>
          <span class="stat-label">合作伙伴</span>
        </div>
      </div>
    </div>

    <!-- 最新更新数据 -->
    <div class="updates-section">
      <h2 class="section-title">最新数据更新</h2>
      <div class="updates-grid">
        <div v-for="(update, index) in updates" :key="index" class="update-card" :style="{ animationDelay: index * 0.1 + 's' }">
          <div class="update-number">#{{ update.number }}</div>
          <div class="update-name">{{ update.name }}</div>
          <div class="update-actions">
            <button class="action-btn edit">编辑</button>
            <button class="action-btn delete">删除</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 特色功能展示 -->
    <div class="features-section">
      <h2 class="section-title">特色功能</h2>
      <div class="features-container">
        <div class="feature-item">
          <div class="feature-icon">🧬</div>
          <h3>基因分析</h3>
          <p>先进的基因序列分析工具，支持多种分析方法</p>
        </div>
        <div class="feature-item">
          <div class="feature-icon">📊</div>
          <h3>数据可视化</h3>
          <p>直观的数据展示，助力研究发现</p>
        </div>
        <div class="feature-item">
          <div class="feature-icon">🔍</div>
          <h3>智能检索</h3>
          <p>强大的搜索功能，快速定位目标数据</p>
        </div>
        <div class="feature-item">
          <div class="feature-icon">🤝</div>
          <h3>协作共享</h3>
          <p>便捷的数据共享机制，促进研究协作</p>
        </div>
      </div>
    </div>

    <!-- 介绍信息 -->
    <div class="info-section">
      <div class="info-content">
        <div class="text-content" data-aos="fade-right">
          <h2 class="section-title">专业的研究平台</h2>
          <p>我们的数据库为遗传性耳聋研究提供全面的数据支持，包括基因变异、临床表型、治疗方案等多维度信息。先进的分析工具和直观的可视化界面，让研究工作更加高效。</p>
        </div>
        <div class="image-content" data-aos="fade-left">
          <img src="/image/home_1.png" alt="Research Platform">
        </div>
      </div>

      <div class="info-content reverse">
        <div class="image-content" data-aos="fade-right">
          <img src="/image/home_2.png" alt="Data Analysis">
        </div>
        <div class="text-content" data-aos="fade-left">
          <h2 class="section-title">数据驱动创新</h2>
          <p>通过整合多源数据，建立标准化的数据模型，为遗传性耳聋的研究和治疗提供可靠的数据支持。先进的分析工具助力研究人员发现新的突破点。</p>
        </div>
      </div>
    </div>

    <!-- Call to Action -->
    <div class="cta-section">
      <h2>开始数据检索</h2>
      <p>使用我们强大的搜索功能，快速找到您需要的遗传性耳聋相关数据</p>
      <button class="cta-button" @click="handleSearch">开始搜索</button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'HomeView',
  setup() {
    const router = useRouter()
    const updates = ref([
      { number: '140406', name: 'Stet clita kasd gubergren, no sea takimata sanctus est' },
      { number: '140412', name: 'Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat' },
      { number: '140404', name: 'Vel illum dolore eu feugiat nulla facilisis at vero eros' },
      { number: '140408', name: 'Iusto odio dignissim qui blandit praesent luptatum zzril delenit' },
      { number: '140410', name: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam' }
    ])

    const handleSearch = () => {
      router.push('/hhldb/search')
    }

    return {
      updates,
      handleSearch
    }
  }
})
</script>

<style scoped>
.home-view {
  padding-top: 70px;
}

/* Hero Section */
.hero-section {
  background: linear-gradient(135deg, #26CAF5 0%, #067a6f 100%);
  color: white;
  padding: 80px 20px;
  text-align: center;
  margin-bottom: 60px;
}

.hero-title {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 20px;
  animation: fadeInUp 0.8s ease;
}

.hero-subtitle {
  font-size: 24px;
  margin-bottom: 40px;
  animation: fadeInUp 1s ease;
}

.stats-container {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

.stat-item {
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 8px;
  backdrop-filter: blur(5px);
  animation: fadeInUp 1.2s ease;
}

.stat-number {
  display: block;
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 16px;
  opacity: 0.9;
}

/* Section Titles */
.section-title {
  font-size: 32px;
  color: #26CAF5;
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}

.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: #26CAF5;
  margin: 15px auto;
}

/* Updates Section */
.updates-section {
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto 60px;
}

.updates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.update-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: fadeInUp 0.5s ease forwards;
  opacity: 0;
}

.update-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

.update-number {
  color: #26CAF5;
  font-weight: bold;
  margin-bottom: 10px;
}

.update-name {
  margin-bottom: 15px;
  line-height: 1.4;
}

.update-actions {
  display: flex;
  gap: 10px;
}

.action-btn {
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.action-btn.edit {
  background: #4CAF50;
  color: white;
}

.action-btn.delete {
  background: #f44336;
  color: white;
}

/* Features Section */
.features-section {
  background: #f8f9fa;
  padding: 60px 20px;
  margin-bottom: 60px;
}

.features-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.feature-item {
  text-align: center;
  padding: 30px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.feature-item:hover {
  transform: translateY(-5px);
}

.feature-icon {
  font-size: 40px;
  margin-bottom: 20px;
}

/* Info Section */
.info-section {
  max-width: 1200px;
  margin: 0 auto 60px;
  padding: 0 20px;
}

.info-content {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 60px;
}

.info-content.reverse {
  flex-direction: row-reverse;
}

.text-content {
  flex: 1;
}

.text-content h2 {
  text-align: left;
  margin-bottom: 20px;
}

.text-content p {
  font-size: 18px;
  line-height: 1.6;
  color: #333;
}

.image-content {
  flex: 1;
}

.image-content img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.image-content img:hover {
  transform: scale(1.02);
}

/* Call to Action Section */
.cta-section {
  background: linear-gradient(135deg, #26CAF5 0%, #067a6f 100%);
  color: white;
  text-align: center;
  padding: 60px 20px;
  margin-top: 60px;
}

.cta-section h2 {
  font-size: 36px;
  margin-bottom: 20px;
}

.cta-section p {
  font-size: 18px;
  margin-bottom: 30px;
  opacity: 0.9;
}

.cta-button {
  background: white;
  color: #26CAF5;
  border: none;
  padding: 15px 30px;
  font-size: 18px;
  border-radius: 30px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero-title {
    font-size: 36px;
  }

  .hero-subtitle {
    font-size: 20px;
  }

  .info-content {
    flex-direction: column;
  }

  .info-content.reverse {
    flex-direction: column;
  }

  .stats-container {
    gap: 20px;
  }

  .stat-item {
    width: calc(50% - 20px);
  }
}
</style> 